<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="layout" content="cardapio" />
	<title>Bem Vindo!</title>
		
	<script type="text/javascript" src="${createLinkTo(dir:'/js/',file:'custom-script.js')}"></script>
	<script type="text/javascript" src="${createLinkTo(dir:'/js/',file:'jquery.roundabout.min.js')}"></script> 	
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

		<style>
			#mod-body{
				 margin-left: 25px;
				 padding-left:0;
				 width:850px;
			}
			
			#mod-body h1{
				text-align: center;
				font-family: 'Lobster',cursive;
				position:relative;
				width:835px;
				color:#fff;
				background:#E90E02;
				font-size:2.2em;
				float:left;
				clear:both;
				padding:10px 10px 10px 20px;
				margin-top: 55px;
				margin-left:-8px;
				margin-bottom:50px;
				text-shadow:0 -1px #d0284b, 0 1px #f96080;
				-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
				-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
				-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
				box-shadow:2px 2px 0 rgba(0,0,0,0.1);
			}
			
			#mod-body h2{
				text-align: center;
				display: block;
			 } 
			 
		
			 
		</style>		
</head>
<body>


<g:if test="${menuAtivo != null}">
				<h1>Menu ${menuAtivo.nome}</h1>	
	
	
	<g:each in="${categoriaList}" var="categoria"> 
			<h2 class="linha-cinza"><span>${categoria.nome}</span></h2>
				<div class="itens-box">	
					<g:each in="${menuAtivo.itemIndicacao()}" var="item">
							<g:if test="${item.key.getCategoria().nome == categoria.nome }"> 
								<div class="produto">
									<div class="overlay">
										<div class="text-nome">${item.key.nome}</div>	
										<div class="text-descricao">${item.key.descricao}</div>
										<div class="corda"><div class="preco">Preço:<br/>R$ ${item.key.preco}</div></div>	
									</div>
									<div class="image"> <img width="190" height="170" src="${item.key.foto}"></div>
								</div>
							</g:if>		
					</g:each>
				</div>	
	</g:each>
		<div style="clear:both;"></div>
</g:if>	

	
</body>
</html>